<template>
	<el-row class="board-page-wrapper">
		<section class="query-container">
			<el-row :gutter="10">
				<el-col :span="8">
					<span class="query-label">学年*</span>
					<el-select size="small" v-model="query.schoolYear">
						<el-option v-for="(item, index) in studyYearList" :label="item.dictLabel" :value="item.dictLabel"
							:key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
					<span class="query-label">学期*</span>
					<el-select size="small" v-model="query.semester">
						<el-option v-for="(item, index) in studyWeekList" :label="item.dictLabel" :value="item.dictLabel"
							:key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="8" style="display: flex;flex-direction: row-reverse;">
					<el-button size="small" style="margin-left: 10px;" @click="resetQuery">清空</el-button>
					<el-button size="small" @click='search()'>搜索</el-button>
				</el-col>
			</el-row>
			<div class="tip-container">
				不合格的用红色标识，通过补考或重修及格的用蓝色标识 【2020-2021学年1学期】正常考成绩未开放查询!
			</div>
		</section>
		<section class="board-table-wrapper">
			<el-table :data="tableData" :border="true" :row-class-name="tableRowClassName" style="width: 100%"
				ref="table">
				<!-- <el-table-column type="selection" width="45" align="center"> </el-table-column> -->
				<el-table-column prop="id" label="查看" align="center"> </el-table-column>
				<el-table-column prop="XN" label="学年" align="center"> </el-table-column>
				<el-table-column prop="KKXQM" label="学期" align="center"> </el-table-column>
				<el-table-column prop="XQM" label="课程代码" align="center"> </el-table-column>
				<el-table-column prop="KCMC" label="课程名称" align="center"> </el-table-column>
				<el-table-column prop="KCXZ" label="课程性质" align="center"> </el-table-column>
				<el-table-column prop="XF" label="学分" align="center"> </el-table-column>
				<el-table-column prop="KCCJ" label="成绩" align="center"> </el-table-column>
				<el-table-column prop="courseRemark" label="成绩备注" align="center"> </el-table-column>
				<el-table-column prop="JD" label="绩点" align="center"> </el-table-column>
				<el-table-column prop="achievement" label="成绩性质" align="center"> </el-table-column>
				<el-table-column prop="isVoid" label="是否成绩作废" align="center"> </el-table-column>
				<el-table-column prop="isDegreeCourse" label="是否学位课程" align="center"> </el-table-column>
				<el-table-column prop="openCollege" label="开课学院" align="center"> </el-table-column>
				<el-table-column prop="courseMark" label="课程标记" align="center"> </el-table-column>
			</el-table>
		</section>
	</el-row>
</template>

<script>
	import {
		getResults,
		getClassroom
	} from '@/api/public/index.js'
	export default {
		data() {
			return {
				query: {
					schoolYear: '',
					semester: ''
				},
				studyYearList: [],
				studyWeekList: [
				],
				tableData: [
					// {
					// 	id: 1010206020,
					// 	month: '20201221',
					// 	departName: '1',
					// 	status: 1
					// },
					// {
					// 	id: 1010206021,
					// 	month: '20191221',
					// 	departName: '2',
					// 	status: 2
					// },
					// {
					// 	id: 1010206022,
					// 	month: '20181221',
					// 	departName: '3',
					// 	status: 3
					// }
				]
			}
		},
		mounted() {
			this.content_data('school_year_type')
			this.content_data('semester_type')
		},
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status === 2) {
					return 'no-qualified'
				} else if (row.status === 3) {
					return 'make-up-examination'
				} else {
					return ''
				}
			},
			resetQuery() {
				this.query = {}
			},
			/* 获取成绩 */
			hq() {
				getResults(this.query).then(res => {
						if(res.code==200){
							this.$message({
							         showClose: true,
							         message: res.msg,
							         type: 'success'
							       });
						this.tableData=res.data
						}else{
							this.$message({
							        showClose: true,
							        message: res.msg
							      });
						}
				})
			},
			/* 搜索 */
			search() {
				this.hq()
			},
			content_data(type) {
				this.getDicts(type).then(res => {
					var obj = {}
					if (res.code === 200) {
			
						switch (type) {
							/* 学年 */
							case 'school_year_type':
								this.studyYearList = res.data
								break;
								/* 校区 */
							case 'campus_type':
								this.schoolList = res.data
								break;
								/* 周次 */
							case 'keekly_type':
								this.weekTimeList = res.data
								break;
								/* 星期 */
							case 'week_type':
								this.weeklist = res.data
								break;
								/* 节次 */
							case 'section_type':
								this.sectionlist = res.data
								break;
								/* 学期 */
								case 'semester_type':
									this.studyWeekList = res.data
									break;
								
							default:
								break;
						}
					}
				})
			}
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.board-page-wrapper {
		padding: 10px;

		.query-container {
			padding: 10px 30px;
			display: flex;
			margin-left: -15px;
			margin-right: -15px;
			flex-wrap: wrap;

			.el-row {
				line-height: 32px;
				padding: 5px 15px;
				width: 100%;

				.el-col {
					display: flex;
					flex-wrap: nowrap;

					.query-label {
						width: 70px;
						text-align: right;
						margin-right: 5px;
					}

					.el-input,
					.el-select {
						width: calc(100% - 70px);
					}
				}
			}

			&>div {
				line-height: 32px;
				padding: 0 15px;
			}
		}
	}
</style>
<style lang="scss">
	.el-table__row.no-qualified {
		background-color: #f00 !important;
		color: #fff;

		&:hover {
			td {
				background-color: #f00 !important;
			}
		}
	}

	.el-table__row.make-up-examination {
		background-color: #00f !important;
		color: #fff;

		&:hover {
			td {
				background-color: #00f !important;
			}
		}
	}
</style>
